import React from 'react'
import logo from '../../public/image/logoJian.png'
import { useRef,useState } from 'react'
import {Button,Modal} from 'antd'
import ad from '../../public/image/ad.webp'
function MenuHorde() {
    const [show,setShow] = useState(false);
    const headOver = ()=>{
         setShow(true)
    }
    const headOut = ()=>{
         setShow(false)
    }
    // const [open,setOpen] = useState(false)
     const [isModalOpen, setIsModalOpen] = useState(false);

  const showModel = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
    // const showMedel = ()=>{
    //     //  setOpen(true)
    // }
  return (
    <div>
        <a onMouseOver={headOver} onMouseOut={headOut} className='headerLogo'>
             <img src='https://lib.eqh5.com/eqx.layout/images/new_logo.svg' />
        </a>
        {
            show?
            <>
              <img src={logo} alt="" className='homeLogoJian'/>   
               <div className='headerCollect'>拖动&nbsp;LOGO&nbsp;到书签栏收藏&nbsp;,&nbsp;方便快速制作</div>
            </>:''
        }
        <ul className='tu'>
            <li><b>免费模板</b><img className='tu1' src="https://lib.eqh5.com/eqx.layout/images/tiphot.svg" alt="" /></li>
            <li>开通会员 <img className='tu1' src="https://lib.eqh5.com/eqx.layout/images/vip_corner_2.png" alt="" /></li>
            <li>产品服务</li>
            <li>解决方案</li>
            <li>内容中台</li>
            <li>资源与合作</li>
        </ul>
        {
            localStorage.getItem('token')?
            <>
              1212121212
            </>
            :
            <>
               <div className='login_right'>
                  <Button type='primary' onClick={showModel}>登录/注册</Button>
                  <img className='img_logo' src={ad} alt="" style={{width:'250px'}}/>
               </div>   
            </>
        }
         <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
    </div>
  )
}

export default MenuHorde